﻿<!doctype html>
<html lang="ch">
<head>
	<meta charset="utf-8">
	<title>成都地铁-生活一脉</title>
	<script type="text/javascript" src="js/jquery.js"></script>
	<link rel="stylesheet" href="css/comon0.css">
</head>

<body>
	<div class="loading">
		<div class="loadbox"> <img src="images/loading.gif"> 页面加载中... </div>
	</div>
	<div class="head">
		<img style="width: 12%; left: 0; margin-top: 3px;margin-left: 20px" class="time" src="images/cdrt.svg" alt="title">
		<div style="width: 33%"></div>
		<h1 style="width: 45%">Chengdu Metro Dispatching Center</h1>
		<div style="width: 20%" class="time" id="showTime"><a href="https://gitee.com/iGaoWei/big-data-view/tree/master/web">2021年12月05日16时16分54秒</a></div>
		<script>
			var t = null;
			t = setTimeout(time, 1000);//開始运行
			function time() {
				clearTimeout(t);//清除定时器
				dt = new Date();
				var y = dt.getFullYear();
				var mt = dt.getMonth() + 1;
				var day = dt.getDate();
				var h = dt.getHours();//获取时
				var m = dt.getMinutes();//获取分
				var s = dt.getSeconds();//获取秒
				var t = null;
				document.getElementById("showTime").innerHTML = y + "年" + Appendzero(mt) + "月" + Appendzero(day) + "日" + Appendzero(h) + "时" + Appendzero(m) + "分" + Appendzero(s) + "秒";
				function Appendzero(obj) {
					if (obj < 10) return "0" + "" + obj;
					else return obj;
				}
				t = setTimeout(time, 1000); //设定定时器，循环运行     
			}
		</script>
		<script>
			// 创建WebSocket连接
			const socket = new WebSocket('ws://localhost:8080/websocket/data');
			// 打开WebSocket连接
			socket.onopen = function(event) {
				console.log('WebSocket connection established');
			};

			// 接收消息
			socket.onmessage = function(event) {
				console.log('Received message: ' + event.data);
				updateChart(event.data);
			};
			// 关闭WebSocket连接
			socket.onclose = function(event) {
				console.log('WebSocket connection closed');
			};
			// 发生错误
			socket.onerror = function(event) {
				console.log('WebSocket error: ' + event);
			};

			function updateChart(data) {
				// 解析JSON数据
				let parsedData;
				try {
					parsedData = JSON.parse(data);
				} catch (e) {
					console.error("Invalid JSON data:", data);
					return;
				}

				// 判断消息类型并调用相应的方法
				if (parsedData.hasOwnProperty('lineName') && parsedData.hasOwnProperty('passengerFlow')) {
					method1(parsedData);
				} else if (parsedData.hasOwnProperty('linger')) {
					method2(parsedData);
				} else if (parsedData.hasOwnProperty('name') && parsedData.hasOwnProperty('distribute')) {
					method3(parsedData);
				} else {
					console.error("Unknown data format:", parsedData);
				}
			}

			function method1(data) {
				console.log("Executing Method 1");
				console.log("Line Name:", data.lineName);
				console.log("Passenger Flow:", data.passengerFlow);
				// 更新相应的图表
				var myChart = echarts.init(document.getElementById('echart5'));
				// 获取当前图表配置
				var option = myChart.getOption();

				var index = option.yAxis[2].data.indexOf(data.lineName);
				if (index !== -1) {
					option.series[0].data[index] = data.passengerFlow;
				}

				// 更新图表
				myChart.setOption(option, true);
			}

			function method2(data) {
				console.log("Executing Method 2");
				// 更新相应的图表
				var myChart = echarts.init(document.getElementById('echarts4'));

				// 准备yAxis数据和series数据
				var yAxisData = data.linger.map(function(item) {
					return item.name;
				});

				var seriesData = data.linger.map(function(item) {
					return item.linger;
				});

				var option = {
					yAxis: [{
						data: yAxisData
					}],
					series: [{
						data: seriesData
					}]
				};

				// 使用刚指定的配置项和数据显示图表
				myChart.setOption(option);

				// 确保图表在窗口大小改变时重新调整大小
				window.addEventListener("resize", function() {
					myChart.resize();
				});
			}

			// 示例method3函数
			function method3(data) {
				console.log("Executing Method 3");
				console.log("Station Name:", data.name);
				console.log("Distribute:", data.distribute);
				const transferName = document.getElementById('transferName');
				transferName.textContent = data.name;
				// 获取图表实例
				var myChart = echarts.init(document.getElementById('echart0'));

				// 准备legend数据和series数据
				var legendData = data.distribute.map(function(item) {
					return item.lineName + '号线';
				});

				var seriesData = data.distribute.map(function(item) {
					return {
						value: item.passengerFlow,
						name: item.lineName + '号线'
					};
				}).sort(function(a, b) {
					return a.value - b.value;
				});

				// 更新图表的option
				var option = {
					legend: {
						data: legendData,
					},
					series: [{
						data: seriesData
					}]
				};

				// 使用刚指定的配置项和数据显示图表
				myChart.setOption(option);

				// 确保图表在窗口大小改变时重新调整大小
				window.addEventListener("resize", function() {
					myChart.resize();
				});
			}
		</script>
	</div>
	<div class="mainbox">
		<ul class="clearfix">
			<li style="width: 25%">
				<div class="boxall" style="height: calc(15% - .15rem)">
					<ul class="row h100 row1">
						<li class="col-4" style="width: 50%">
							<div class="bar1"><img src="images/train.svg">
								<h3><span>在运行列车</span>268 辆</h3>
							</div>
						</li>
						<li class="col-4" style="width: 50%">
							<div class="bar1"><img src="images/station.svg">
								<h3><span>在运营车站</span>386 座</h3>
							</div>
						</li>
					</ul>
				</div>
				<div class="boxall" style="height: calc(43% - .15rem)">
					<div class="alltitle">换乘分流</div>
					<h2 style="text-align: center" id="transferName">火车南站</h2>
					<div class=" boxnav" id="echart0"></div>

				</div>

				<div class="boxall" style="height: calc(42% - .15rem)">
					<div class="alltitle">滞留人数前十车站-千人</div>
					<div class=" boxnav " style="margin-right: -3%" id="echarts4">
					</div>
				</div>
			</li>

			<li style="width: 50%">
				<div class="boxall" style="height: calc(58% - .15rem)">
					<div class="alltitle">7日全线网客流</div>
					<div class="boxnav" id="echarts2"></div>

				</div>
				<div class="boxall" style="height: calc(42% - .15rem)">
					<div class="alltitle">票价收入-电费支出</div>
					<div class="boxnav h100" id="echarts1" style="height: 90%"></div>
				</div>

			</li>

			<li style="width: 25%">
				<div class="boxall" style="height: calc(100% - .15rem);">
					<div class="alltitle">线路实时客流</div>
					<div class=" boxnav paim" style="width: 16%; float: left; margin-right: -5%">
						<ul class="h101" >
							<li style="margin-top: -10%; margin-bottom: 5%">
								<span class="center-text" style="background-color: #331D86; height: 70%; font-size: medium;width: 50%">1</span>
							</li>
							<li style="margin-bottom: 4%">
								<span class="center-text" style="background-color: #F3745B; height: 70%; font-size: medium;width: 50%;">2</span>
							</li>
							<li style="margin-bottom: 4%">
								<span class="center-text" style="background-color: #D3036B; height: 70%; font-size: medium;width: 50%;">3</span>
							</li>
							<li style="margin-bottom: 4%">
								<span class="center-text" style="background-color: #19B467; height: 70%; font-size: medium;width: 50%;">4</span>
							</li>
							<li style="margin-bottom: 4%">
								<span class="center-text" style="background-color: #A03E94; height: 70%; font-size: medium;width: 50%;">5</span>
							</li>
							<li style="margin-bottom: 4%">
								<span class="center-text" style="background-color: #C18344; height: 70%; font-size: medium;width: 50%;">6</span>
							</li>
							<li style="margin-bottom: 4%">
								<span class="center-text" style="background-color: #7FCDDA; height: 70%; font-size: medium;width: 50%;">7</span>
							</li>
							<li style="margin-bottom: 4%">
								<span class="center-text" style="background-color: #A5C938; height: 70%; font-size: medium;width: 50%;">8</span>
							</li>
							<li style="margin-bottom: 4%">
								<span class="center-text" style="background-color: #E8AF0C; height: 70%; font-size: medium;width: 50%;">9</span>
							</li>
							<li style="margin-bottom: 4%">
								<span class="center-text" style="background-color: #0455A5; height: 70%; font-size: medium;width: 50%;">10</span>
							</li>
							<li style="margin-bottom: 4%">
								<span class="center-text" style="background-color: #8ECBA2; height: 70%; font-size: medium;width: 50%;">17</span>
							</li>
							<li style="margin-bottom: 4%">
								<span class="center-text" style="background-color: #1F646B; height: 70%; font-size: medium;width: 50%;">18</span>
							</li>
							<li style="margin-bottom: 3%">
								<span class="center-text" style="background-color: #9FA1CE; height: 70%; font-size: medium;width: 50%;">19</span>
							</li>
						</ul>
					</div>
					<div class="boxnav" style="width: 84%;float: left" id="echart5"></div>
				</div>
			</li>
		</ul>
	</div>

	<script>
		$(document).ready(function () {
			var arr = [];
			var max;
			$(".paim li i").each(function () {
				arr.push($(this).text());
			})
			//alert(arr)
			max = Math.max.apply(null, arr);

			$(".paim .pmbar span").each(function () {
				var i = $(this).parents("li").index()
				w = arr[i] / max * 100;
				sw = w.toFixed(0) + '%'

				$(this).css({ width: sw })
			})

		})
	</script>
	<script type="text/javascript" src="js/echarts.min.js"></script>
	<script language="JavaScript" src="js/js.js"></script>

</body>
</html>